<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <title>主页</title>
</head>
<link rel="stylesheet" href="./css/vant.css" />
<script src="./js/vue3.js"></script>
<script src="./js/vant4.js"></script>
<style>
  @font-face {
    font-family: "fff";
    src: url("./font/SourceHanSansSC-Regular-2.otf");
  }

  body {
    font-family: "fff";
  }
</style>

<body>
  <div id="app">
    <van-row>
      <van-popup
  v-model:show="showBottom"
  position="bottom"
  round
  :style="{ height: '90%' }"
>
<div style="padding-top: 20px;padding: 10px;box-sizing: border-box;width: 100%;height: 100%;">
  <div v-for="e in chooseList"  v-on:click="showPop(e)" style="position: relative;margin-top: 10px;"> 
    <img v-for="es in e.PointList"  style="width: 10px;height: 10px;border-radius: 4px;" :src="es.EquType.ImageInfo.FilePath" :style="{position:'absolute',left:es.X*100+'%',top:es.Y*100+'%'}"/>
    <img :src="e.ImageInfo.FilePath" alt="" style="width: 100%;height: 212px;" srcset="">
  </div>

</div>
</van-popup>
      <van-col span="24">
        <div style="width: 347px;
margin: 0 auto;
height: auto;display: flex;flex-direction: column;">
         <canvas v-show="false" id="canvas" style="width: 100%;height: 212px;"></canvas>
          <div v-for="e in list"
            style="width: 100%;height: 333px;margin-top: 11px;border-radius: 10px;overflow: hidden; background: #F9F9FC;">
            <img v-on:click="showDot(e)" ref="test" :src="e.Map" style="width: 100%;height: 212px;" alt="" srcset="">
            <div style="padding: 0 12px;height: 73px;box-sizing: border-box;">
              <div style="width: 100%;">
                <div style="font-size: 16px;
font-weight: 500;">{{e.Name}}</div>
                <div style="display: flex;align-items: center;margin-top: 10px;">
                  <div v-for="es in e.ItemList" style="margin-right: 6px; display: flex; align-items: center;font-size: 10px;
font-weight: normal;color: #757C8C;">

                    <img style="width: 14px ;height: 14px;margin-right: 1px;" :src="es.ImgUrl" />
                    <div>{{es.TypeName}}：{{es.Count}}</div>
                  </div>

                </div>

              </div>

            </div>
            <div
              style="width: 100%;height: 48px;border-top: 1px solid #ededed;display: flex;justify-content: flex-end;align-items: center;">
              <div v-on:click="more(e.Id)" style="width: 76px;
height: 28px;
display: flex;
margin-right: 14px;
align-items: center;
background: #014DA1;
justify-content: center;
font-size: 12px;
font-weight: normal;
color: #fff;
border-radius: 272px;">查看更多</div>
            </div>
          </div>
      </van-col>
    </van-row>
  </div>
</body>
<script src="./js/axios.js"></script>
<script type="module">
  import Request from "./js/request.js"
  const {
    createApp,
    ref,
    onMounted,
    h,
    reactive,
    toRefs,
    getCurrentInstance,
    nextTick,
    defineComponent 
  } = Vue;


  function canvasToDataURL(canvas, format, quality) {
    return canvas.toDataURL(format || 'image/jpeg', quality || 1.0);
  }

  const Composition = {
    setup() {
      const data = reactive({
        list: [],
        ishow: false,
        show: false,
        url: "",
        ctx: "",
        dpr:1,
        chooseList:[],
        showBottom:false,
        canvas:null,
        proxy:"",
        images: [
        ]
      });
      const params = toRefs(data);
      const methods = {
        init: () => {
          Request({
            url: "/FireControl/getparklist",
            method: 'get',

          }).then(res => {
            params.list.value = res.Data

          })
        },
        showDot: (e) => {
     params.showBottom.value=true
     params.chooseList.value=e.MapList
          return
        },


showPop:async(e)=>{
let list=e.PointList.map(es=>{
  return {
    x:es.X,
    y:es.Y,
    bg:es.EquType.ImageInfo.FilePath
  }
})

if (list.length == 0) {
              return vant.showToast("暂无标记点位");
            }
  
let fres = await methods.drowImage(e.ImageInfo.FilePath, list);
            if (fres) {
              vant.closeToast();
              vant.showImagePreview({
                images: [params.url.value],
                showIndex: false,
                closeable: true,
              });
            }
},
          // url 图片路径
          loadImage(list) {
            let s = [];
            return new Promise((resolve, reject) => {
              list.forEach(async (e, i) => {
                const img = new Image();
                img.setAttribute("crossOrigin", "anonymous");
                img.src = e.bg;
                img.onload = function () {
                  params.ctx.value.drawImage(
                    img,
                    (params.canvas.value.width / params.dpr.value) * e.x,
                    (params.canvas.value.height / params.dpr.value) * e.y,
                    15,
                    15
                  );
                  s.push(i);
                  console.log(s);
                  if (s.length == list.length) {
                    resolve(true);
                  }
                };
                img.onerror = () => {
                  vant.showToast("图像加载失败");
                reject(new Error("图像加载失败"));
              };
              });
            });
          },

          loadBaseImage: (url) => {
            return new Promise((resolve, reject) => {
              const img = new Image();
              img.setAttribute("crossOrigin", "anonymous");
              img.src = url;
              img.onload = () => {
                const width = params.proxy.value.$refs.test[0].width;
                const height = params.proxy.value.$refs.test[0].height;
                params.canvas.value.width = width * params.dpr.value;
                params.canvas.value.height = height * params.dpr.value;
                params.ctx.value.scale(params.dpr.value, params.dpr.value);
                params.ctx.value.drawImage(img, 0, 0, width, height);
                // 当图像加载完成后进行resolve
                resolve(img);
              };
              img.onerror = () => {
                vant.showToast("图像加载失败");
                reject(new Error("图像加载失败"));
              };
            });
          },

        drowImage: (url,list) => {
          return new Promise(async (resolve, reject) => {
              vant.showLoadingToast({
                duration: 0,
                forbidClick: true,
                message: "数据加载中",
              });
              params.canvas.value = document.getElementById("canvas");
              params.ctx.value = params.canvas.value.getContext("2d");

              let res = await methods.loadBaseImage(url);
              if (res) {
                let ress = await methods.loadImage(list);
                if (ress) {
                  params.canvas.value.toBlob((blob) => {
                    const imageUrl = URL.createObjectURL(blob);

                    params.url.value = imageUrl;

                    resolve(true);
                  });
                }
              }
            });
        },


        more: (id) => {
          window.location.href = `/b.html?id=${id}`
        }
      };


      onMounted(() => {
        params.dpr.value = 4
        methods.init()
        const { proxy } = getCurrentInstance()
        params.proxy.value=proxy
      })

      return {
        // 返回对象给模板
        ...params,
        ...methods,
      };
    },
  };

  const vapp = createApp(Composition);
  vapp.use(vant.Lazyload);

  vapp.use(vant).mount("#app");
</script>

</html>